import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';

class InputImg extends React.Component {
  onSelectImage(e) {
    const self = this.inputText;
    const file = self.files[0];
    const file2 = e.target.files[0];
    this.props.dispatch({
      type: 'physicianAuth/setFile',
      payload: {
        file: file2,
      },
    });
    const reader = new FileReader();
    let imgFile;
    this.props.dispatch(routerRedux.push('/selectImage'));
    reader.onload = (e) => {  // eslint-disable-line
      imgFile = e.target.result;
      this.props.dispatch({
        type: 'physicianAuth/setImage',
        payload: {
          imgSrc: imgFile,
        },
      });
    };
    if (file) {
      reader.readAsDataURL(file);
    }
  }

  render() {
    const { image } = this.props.physicianAuth;
    return (
      <div>
        <input
          ref={(input) => {
            this.inputText = input;
          }}
          style={{ position: 'absolute', zIndex: '100', opacity: '0', width: '100%', height: '30%' }}
          type="file" accept="image/*"
          onChange={this.onSelectImage.bind(this)}
        />
        <p
          ref={(input) => {
            this.text = input;
          }}
          style={{ marginTop: '0.8rem', position: 'absolute', zIndex: '98', left: '2.1rem', color: '#c4c4c4' }}
        >{ image ? '' : '免冠正面，以工作证头像为佳'}</p>
      </div>
    );
  }
  }

function mapStateToProps({ physicianAuth }) {
  return { physicianAuth };
}

export default connect(mapStateToProps)(InputImg);

